<template>
  <div class="tab" v-cloak>
    <div class="tabItem" @click="tabTo('workManagement')">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[this.pIndexKey == 'workManagement'?'bar-active':'']">{{'\ue600'}}</text>
      <text class="text" :class="[this.pIndexKey == 'workManagement'?'bar-active':'']">工作管理</text>
    </div>
    <div class="tabItem" @click="tabTo('projectProgress')">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('projectProgress')]">{{'\ue60d'}}</text>
      <text class="text" :class="[this.isActive('projectProgress')]">工程进度</text>
    </div>
    <div class="tabItem" @click="tabTo('operationSituation')">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('operationSituation')]">{{'\ue63b'}}</text>
      <text class="text" :class="[this.isActive('operationSituation')]">运行情况</text>
    </div>
    <div class="tabItem" @click="tabTo('my')">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('my')]">{{'\ue60b'}}</text>
      <text class="text" :class="[this.isActive('my')]">我</text>
    </div>
  </div>
</template>
<script>
import { addIconFontSupport } from '@/config/iconConfig.js';
const dom = weex.requireModule('dom');
export default {
  name: 'tab',
  data () {
    return {
      pIndexKey:'workManagement'
    }
  },
  created () {
    addIconFontSupport(dom, "../../");
  },
  methods: {
    isActive (_c) {
      return this.pIndexKey === _c ?'bar-active':''
    },
    tabTo(_key){
      if(this.pIndexKey === _key) return;
      this.pIndexKey = _key;
      this.$emit('tabTo',{
        data : {
          key : _key
        }
      })
    }
  }
}
</script>


<style scoped>
.tab{
  width: 750px;
  height: 100px; 
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  background-color:rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
  padding-left: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0; 
}
.tabItem{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.bar-active{
  color:rgba(62,175,252,1);
}
.text{
  font-size:25px;
  font-family:PingFangSC-Regular;
  color:rgba(204,204,204,1);
  padding-top: 10px;
}

.bar-ic{
  font-size: 50px;
  color: rgba(204,204,204,1);
}
[v-cloak] {
  display: none !important;
}
</style>

